<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>SiteServer CMS - 用户中心</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta content="SiteServer CMS 用户中心" name="description" />
  <meta content="SiteServer CMS" name="author" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="shortcut icon" href="../assets/images/favicon.ico">
  <link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/font-awesome-4.7.0.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/ionicons-2.0.0.min.css" rel="stylesheet" type="text/css" />
  <link href="../assets/css/siteserver.min.css" rel="stylesheet" type="text/css" />
  <script src="../assets/lib/modernizr.min.js"></script>
  <script type="text/javascript" src="../assets/lib/iframe-resizer-3.6.2/iframeResizer.contentWindow.min.js"></script>
</head>

<body class="p-0">
  <div id="main" class="container-fluid">

    <template v-if="pageConfig">

      <div class="row">
        <div class="col-sm-12">
          <div class="page-title-box">
            <h4 class="page-title">个人资料</h4>
          </div>
        </div>
      </div>

      <div class="row">

        <div class="col-xl-3 col-lg-4">
          <div class="text-center card-box">
            <div class="member-card">
              <div class="thumb-xl member-thumb m-b-10 center-block">
                <img :src="avatarUrl" class="rounded-circle img-thumbnail" alt="profile-image">
              </div>

              <div class="">
                <h4 class="m-b-5">
                  {{ pageUser.displayName || pageUser.userName }}
                </h4>
                <p class="text-muted" v-if="pageUser.signature">{{ pageUser.signature }}</p>
              </div>

              <file-upload extensions="gif,jpg,jpeg,png,webp" accept="image/png,image/gif,image/jpeg,image/webp" name="avatar"
                :drop="!editAvatar" v-model="files" @input-filter="inputFilter" @input-file="inputFile" ref="upload"
                :post-action="uploadUrl" class="btn btn-success btn-sm w-sm m-t-10">
                更换头像
              </file-upload>

              <!-- <a href="../index.html#pages/messages.html" target="_top" class="btn btn-primary btn-sm w-sm m-t-10">我的消息</a> -->

              <div class="text-left m-t-40">
                <p v-if="pageUser.mobile" class="text-muted font-13">
                  <strong>手机：</strong> <span class="m-l-15"> {{ pageUser.mobile }} </span>
                </p>
                <p v-if="pageUser.email" class="text-muted font-13">
                  <strong>邮箱：</strong> <span class="m-l-15"> {{ pageUser.email }} </span>
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-8 col-xl-9">

          <template v-if="pageAlert">
            <div class="alert" v-bind:class="{ 'alert-warning': pageAlert.type === 'warning', 'alert-success': pageAlert.type === 'success', 'alert-danger': pageAlert.type === 'danger' }">
              <button v-on:click="pageAlert = null" class="close" data-dismiss="alert">×</button>
              <span v-html="pageAlert.html"></span>
            </div>
          </template>

          <tempalte v-if="files.length && editAvatar">
            <div class="card-box">
              <div style="max-width: 100%" v-if="files.length">
                <img ref="editImage" :src="files[0].url" />
              </div>
              <div class="text-center p-4">
                <button type="submit" class="btn btn-primary mr-2" @click.prevent="editSave">保 存</button>
                <button type="button" class="btn btn-secondary" @click.prevent="$refs.upload.clear">取 消</button>
              </div>
            </div>
          </tempalte>
          <template v-else>
            <div class="card-box">
              <h4>个人资料</h4>

              <hr />

              <form v-on:submit="btnSubmitClick">

                <div v-for="style in styles" v-if="style.inputType === 'Text' || style.inputType === 'TextArea' || style.inputType === 'Radio'"
                  class="form-group">
                  <label>
                    {{ style.displayName }}
                    <small v-if="style.helpText" class="text-muted">{{ style.helpText }}</small>
                    <span v-if="style.additional.veeValidate.indexOf('required') !== -1" class="text-danger">*</span>
                    <small v-show="errors.has(style.attributeName)" class="text-danger">{{
                      errors.first(style.attributeName) }}</small>
                  </label>

                  <template v-if="style.inputType === 'Text'">
                    <input v-model="style.value" type="text" class="form-control" :name="style.attributeName"
                      :data-vv-as="style.displayName" v-validate="style.additional.veeValidate" :class="{'is-invalid': errors.has(style.attributeName)}">
                  </template>
                  <template v-else-if="style.inputType === 'TextArea'">
                    <textarea v-model="style.value" class="form-control" :style="'height: ' + (style.additional.height ? style.additional.height : 125) + 'px;'"
                      :name="style.attributeName" :data-vv-as="style.displayName" v-validate="style.additional.veeValidate"
                      :class="{'is-invalid': errors.has(style.attributeName)}"></textarea>
                  </template>
                  <template v-else-if="style.inputType === 'Radio'">
                    <div class="m-2">
                      <div v-for="(styleItem, index) in style.styleItems" class="radio radio-primary form-check-inline">
                        <input v-model="style.value" type="radio" :id="styleItem.itemValue" :value="styleItem.itemValue"
                          :name="style.attributeName">
                        <label :for="styleItem.itemValue"> {{ styleItem.itemTitle }} </label>
                      </div>
                    </div>
                  </template>

                </div>
                <button type="button" @click="btnSubmitClick" class="btn btn-primary w-md">保 存</button>

              </form>

            </div>
          </template>
        </div>

      </div>

    </template>
    <template v-else>
      <div class="text-center" style="margin-top: 100px">
        <img class="mt-3" src="../assets/images/loading.gif" />
        <p class="lead mt-3 text-nowrap">载入中，请稍后...</p>
      </div>
    </template>

  </div>
</body>

</html>

<script src="../assets/lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../assets/lib/popper.min.js"></script>
<script src="../assets/lib/bootstrap.min.js"></script>
<script src="../assets/lib/lodash-4.17.10.min.js" type="text/javascript"></script>
<script src="../assets/lib/layer-3.1.1/layer.js" type="text/javascript"></script>
<script src="../assets/lib/sweetalert2-7.28.4.all.min.js" type="text/javascript"></script>
<script src="../assets/lib/vue-2.5.16.min.js" type="text/javascript"></script>
<script src="../assets/lib/vee-validate-2.1.0.js"></script>
<script src="../assets/lib/vee-validate-locale-zh_CN-2.1.0.js"></script>
<script src="../assets/lib/js.cookie-2.2.0.js"></script>
<script src="../assets/js/utils.js" type="text/javascript"></script>
<script src="../config.js" type="text/javascript"></script>

<script src="../assets/lib/vue-upload-component-2.8.14.js" type="text/javascript"></script>
<link href="../assets/lib/cropperjs-1.4.1/cropper.min.css" rel="stylesheet">
<script src="../assets/lib/cropperjs-1.4.1/cropper.min.js"></script>
<script src="profile.js" type="text/javascript"></script>